<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Custom Drop Action</title>
    <link rel=stylesheet href=libs/bootstrap/css/bootstrap.css>
    <link rel=stylesheet href=libs/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css>
    <link rel=stylesheet href=src/css/graph.editor.css>
</head>
<body class="layout">
<div id="editor" data-options="region:'center'"></div>
<script src="http://demo.qunee.com/lib/qunee-min.js?v=1.8"></script>
<!-- build:js libs/js.js -->
<script src="libs/jquery.min.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/layout.border.js"></script>

<!-- build:js libs/graph.editor/graph.editor.js -->
<script src="src/common/i18n.js"></script>
<script src="src/common/DomSupport.js"></script>
<script src="src/common/DragSupport.js"></script>
<script src="src/common/FileSupport.js"></script>
<script src="src/common/JSONSerializer.js"></script>
<script src="src/common/ExportPane.js"></script>
<script src="src/common/Toolbar.js"></script>
<script src="src/common/ToolBox.js"></script>
<script src="src/common/PopupMenu.js"></script>
<script src="src/graph.editor.js"></script>
<!-- endbuild -->
<script>
    function createNodes1(evt, graph, xy, info){
        var x = xy.x;
        var y = xy.y;
        var hello = graph.createNode("Hello", -100 + x, -50 + y);
        hello.image = Q.Graphs.server;
        var qunee = graph.createNode("Qunee", 100 + x, 50 + y);
        var edge = graph.createEdge("Hello\nQunee", hello, qunee);
    }

    var createGroup = function(evt, graph, xy, options){
        options = options || {};
        var width = options.width || 140;
        var height = options.height || 680;
        var headHeight = options.headHeight || 70;
        var icon = options.icon || 'images/icon1.png';
        var name = options.name;
        var x = xy.x || 0;
        var y = xy.y || 0;

        var group = graph.createShapeNode(name, Q.Shapes.getRect(0, 0, width, height), x, y);
        group.setStyle(Q.Styles.SHAPE_FILL_COLOR, '#3d5370');
        group.setStyle(Q.Styles.SHAPE_STROKE, 2);
        group.setStyle(Q.Styles.SHAPE_STROKE_STYLE, '#2f3742');

        group.setStyle(Q.Styles.LABEL_POSITION, {x: 50, y: headHeight / 2});
        group.setStyle(Q.Styles.LABEL_ANCHOR_POSITION, Q.Position.LEFT_MIDDLE);
        group.setStyle(Q.Styles.LABEL_COLOR, '#FFF');
        group.setStyle(Q.Styles.LABEL_FONT_SIZE, 14);
        group.setStyle(Q.Styles.LABEL_Z_INDEX, 1);
        group.zIndex = -1;

        var header = new Q.ImageUI(Q.Shapes.getRect(2, 2, width - 4, headHeight - 4));
        header.position = {x: 0, y: 0};
        header.layoutByAnchorPoint = false;
        header.fillColor = '#5b7fb3';
        group.addUI(header);

        var icon = new Q.ImageUI(icon);
        icon.position = {x: 30, y: headHeight / 2};
        group.addUI(icon);
        return group;
    }

    var path = new Q.Path();
    path.moveTo(-200, -50);
    path.lineTo(200, -50);
    path.lineTo(200, 50);
    path.lineTo(-100, 50);
    $('#editor').graphEditor({images: [{name: 'Custom Node', images: [{
        image: './images/bus.png', type: 'ShapeNode', styles: {
            'shape.stroke': 2,
            'shape.fill.color': null
        }, properties: {
            'busLayout': true,
            "path": path
        }, clientProperties: {
                id: '001'
        }

    },{
        image: 'images/hello.png',
        ondrop: 'createNodes1'//do any thing by your self when drop into the graph

    },{
        image: 'images/group.png',
        name: '11',
        ondrop: 'createGroup'

    }]}], callback: function(editor){
        var graph = editor.graph;
        editor.toolbox.hideDefaultGroups();

        graph.interactionDispatcher.on(function(evt){
            if(evt.kind == Q.InteractionEvent.ELEMENT_CREATED){
                var element = evt.data;
                if(element instanceof Q.Edge){
                    element.angle = Math.PI / 2;
                }
            }
        })

    }});
</script>
</body>
</html>